<template>
    <div class="container">
        <div class="login">
            <div class="item">
                <h2>酒店管理系统</h2>
            </div>
            <div class="item">
                <span>账号：</span>
                <el-input  v-model="username" placeholder="请输入账号"></el-input>
            </div>
            <div class="item">
                <span>密码：</span>
                <el-input  type="password" v-model="password" placeholder="请输入密码"></el-input>
            </div>
            <div class="item">
                <span>记住我：</span>
                <el-checkbox v-model="ckMe" size="large"></el-checkbox>
            </div>
            <div class="item">
                <span></span>
                <el-button  type="primary" @click="Login">登录</el-button>
                <el-button @click="reset">取消</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import api from "../api";
    import jwt from 'jwt-decode'
    import {toRefs, reactive,onMounted} from 'vue'
    import { ElMessage } from 'element-plus'
    // 引入路由
    import {useRouter} from 'vue-router'
    export default {
        name: "Login",
        setup() {
            //获取路由对象
            let $router=useRouter()
            let loginData = reactive({
                username: '',
                password: '',
                ckMe: false
            })
            // 自动获取用户名和密码
            onMounted(()=>{
                if (localStorage.getItem('token') && localStorage.getItem('password')){
                    loginData.username=localStorage.getItem('token')
                    loginData.password=localStorage.getItem('password')
                    loginData.ckMe=true
                }
            })

            // 登录方法
           let Login=()=>{
              let{username,password}=loginData
               api.getLogin({username: username,password: password}).then(res=>{
                    if (res.data.status===200){
                        // 自动获取用户名和密码
                            localStorage.setItem('token',jwt(res.data.token).username)
                            localStorage.setItem('password',loginData.password)
                        $router.push('/layout')
                    }else {
                        ElMessage.error('登录失败')
                    }
               })
           }
           // 取消方法
           let reset=()=>{
             loginData.username=''
             loginData.password=''
             loginData.ckMe=false
           }
            return {
                // 返回数据
                ...toRefs(loginData),
                 Login,reset
            }
        }
    }
</script>

<style scoped lang="scss">
    .container {
        height: 100vh;
        width: 100vw;
        background: linear-gradient(to bottom, rgba(18, 55, 80), lightblue);
        display: flex;
        justify-content: center;
        align-items: center;

        .login {
            width: 400px;
            border: 1px solid #eee;
            border-radius: 10px;
            color: #eeeeee;
            padding: 10px;
        }

        .item {
            display: flex;
            font-size: 14px;
            align-items: center;
            margin: 10px 0;

            h2 {
                flex: 1;
                text-align: center;
            }

            span {
                width: 70px;
                text-align: right;
            }
        }
    }
</style>
